<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>为平台角色分配菜单权限</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/web/res/css/xadmin.css">
        <script src="/web/res/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/web/res/js/xadmin.js"></script>
</head>

<body style="background-color: white;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend class="form-title"><div id="tip">当前角色：${role.name}</div></legend>
    </fieldset>
    <div class="layui-fluid" id="orderEdit">
        <form class="layui-form layui-form-pane" id="formsubmit"  action="/role/saveRoleMenu">
            <input type="hidden" name="roleid" value="${(role.id?c)!''}"/>
        </form>


        <div class="layui-form-item">
            <table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-radius" lay-submit lay-filter="save" >&emsp;保存&emsp;</button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" onclick="xadmin.close();">&emsp;返回&emsp;</button>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        layui.config({
            base: '/web/res/lib/layui/js/',
        })
        layui.use(['treeTable',"tree",'layer','code','form'],function(){
            var o = layui.$,
                tree = layui.tree,
                form = layui.form,
                layer = layui.layer,
                $ = layui.$,
                treeTable = layui.treeTable;
            // 直接下载后url: './data/table-tree.json',这个配置可能看不到数据，改为data:[],获取自己的实际链接返回json数组
            var	re = treeTable.render({
                elem: '#tree-table',
                data: [<#list list as menu>{"id":${menu.id},"pid":${menu.pid},"title":"${menu.title}" <#if menu.checked == true>,"checked":'checked'</#if> ,"elementList":[<#if menu.elementList?exists><#list (menu.elementList) as element>{"id":${element.id},"title":"${element.title}" ,"menuid":${element.menuid}  <#if element.checked == true>,"checked":'checked'</#if> }  <#if element_has_next>,</#if></#list></#if>]}<#if menu_has_next>,</#if></#list>],
                icon_key: 'title',
                checked: {
                    key: 'idcheck',
                    data: []
                },
                end: function(e){
                    form.render();
                },
                cols: [
                    {
                        key: 'id',
                        title: '<input type="checkbox" value="1" lay-skin="primary" lay-filter="checkall" >',
                        width: '20px',
                        align: 'center',
                        template: function(item){
                            return '<input type="checkbox" id="menuid" value="'+item.id+'" menuid="'+item.id+'" menupid="'+item.pid+'" lay-skin="primary" apiID lay-filter="checkid"  pid="'+item.pid+'" '+item.checked+' >';
                        }
                    },
                    {
                        key: 'title',
                        title: '菜单名称',
                        width: '200px',
                        template: function(item){
                            if(item.level == 0){
                                return '<span style="color:red;">'+item.title+'</span>';
                            }else if(item.level == 1){
                                return '<span style="color:green;">'+item.title+'</span>';
                            }else if(item.level == 2){
                                return '<span style="color:#aaa;">'+item.title+'</span>';
                            }else{
                                return item.title;
                            }
                        }
                    },
                    {
                        key: 'menu',
                        title: '接口',
                        width: '400px',
                        align: 'center',
                        template: function(item){
                            var elementArray = '';
                            $.each(item.elementList,function(i,itemElement){
                                var elementId = itemElement.id;
                                var elementTitle = itemElement.title;
                                var menuid = itemElement.menuid;
                                elementArray = elementArray+'<input type="checkbox" id="elementid" value="'+elementId+'" elementid="'+elementId+'" elementmenuid="'+menuid+'" name="elementList[i].id" title="'+elementTitle+'" lay-filter="checkelementid" lay-skin="primary" api '+itemElement.checked+' >';
                            });
                            return elementArray;
                        }
                    }
                ]
            });

            // 监听全选
            form.on('checkbox(checkall)', function (data) {
                if (data.elem.checked) {
                    $("input[apiID]").prop("checked",true);
                }else{
                    $("input[apiID]").prop("checked",false);
                }
                form.render('checkbox');
            });

            form.on('checkbox(checkid)', function (data) {
                // alert($(this).attr("menuid")+"    "+data.elem.checked);
                if (data.elem.checked) {
                    $("input[elementmenuid='"+$(this).attr("menuid")+"']").prop("checked",true);
                    $("input[menupid='"+$(this).attr("menuid")+"']").prop("checked",true);
                    $("input[menuid='"+$(this).attr("menupid")+"']").prop("checked",true);
                }else{
                    $("input[menupid='"+$(this).attr("menuid")+"']").prop("checked",false);
                    $("input[elementmenuid='"+$(this).attr("menuid")+"']").prop("checked",false);
                }
                form.render('checkbox');
            });

            form.on('checkbox(checkelementid)', function (data) {
                // alert($(this).attr("elementmenuid")+"    "+data.elem.checked);
                if (data.elem.checked) {
                    $("input[menuid='"+$(this).attr("elementmenuid")+"'").prop("checked",true);
                }
                form.render('checkbox');
            });

            //保存提交
            form.on('submit('+$("button[lay-submit]:eq(0)").attr("lay-filter")+')', function(data){
                var myform = document.forms[0];

                var sort = 0;
                $("#tree-table tr").each(function(rowIndex) {
                    var checked = false;

                    if($(this).find("input[apiID]:eq(0)").prop('checked')){
                        var menuid = $(this).find("input[apiID]:eq(0)").val();
                        if($(this).find("input[apiID]:eq(0)").prop('checked')){
                            // alert($(this).find("input[apiID]:eq(0)").val());
                            checked = true;
                        }
                        var menuidInput = document.createElement("input");
                        menuidInput.name="menuidArray["+sort+"].menuid";
                        menuidInput.type="hidden";
                        menuidInput.value=menuid;
                        myform.appendChild(menuidInput);

                        var elementsort = 0;
                        $(this).find("input[api]").each(function(index,ele){
                            if ($(this).prop('checked')) {
                                var elementidInput = document.createElement("input");
                                elementidInput.name="menuidArray["+sort+"].elementidList["+elementsort+"]";
                                elementidInput.type="hidden";
                                elementidInput.value=$(this).val();
                                myform.appendChild(elementidInput);
                                elementsort++;
                            }
                        });
                        sort++;
                    }
                });
                layer.confirm('确认要保存吗？<br/> <#if role.isrootrole?exists && (role.isrootrole)?number == 1>当前操作的是最高权限角色，请您一定要慎重！</#if>', function (index) {
                    ajaxPost($,$("#formsubmit").attr("action"),$("#formsubmit").serializeObject(),function (data) {
                        if (data.code == 0) {
                            layer.msg(data.msg, {icon: 1, time: 1000}, function(){
                                // xadmin.father_reload();
                            });
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 1000}, function(){
                                xadmin.close();
                            });
                        }
                    });
                });
            });

        })
    </script>

    <script>
        layui.use('form', function () {
            let $ = layui.$;
            var form = layui.form;
            form.render();
            $.fn.extend({
                serializeObject: function() {
                    var obj = {}; //声明一个对象
                    $.each(this.serializeArray(), function(index, field) {
                        obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
                    })
                    return obj;
                }
            });
        });
    </script>
</body>

</html>